<!--  -->
<template>
  <div class="container">
    <navbar
      class="de-navbar"
      :vaniconL="true"
      :noRight="true"
      :noLeft="false"
      :vaniconR="true"
      iconNameL="arrow-left"
      iconNameR="setting-o"
      @clickLeft="goBack"
      bgcolor="rgb(55, 81, 255) !important"
      bgImage="linear-gradient(rgb(55, 81, 255) 0%, rgb(76, 99, 255) 50%, rgb(91 112 255) 75%, rgb(107 127 255) 100%) !important"
      >撰写建议</navbar
    >
    <div style="height: 0.45rem"></div>
    <div class="d-list">
      <div class="list-box">
        <div class="head">
          <img src="@/assets/images/mine1.png" />
          <div class="right">
            <div class="up">
              <span>{{ items.patientName }}</span>
              <span>{{ items.patientAge }}岁</span>
              <span>{{ items.patientGender == 0 ? "男" : "女" }}</span>
              <!-- <span>阅片费:1111</span> -->
            </div>
            <div class="down">
              <span>订单日期：{{ items.orderTime }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="advice">
        <p>推荐医院：</p>
        <van-cell
          :title="hospitalItems ? '已选择医院' : '点击选择医院'"
          is-link
          @click="toHospital"
        />
        <p class="hospital" v-if="deal2">{{ deal2 }}</p>
        <p>给用户的建议:</p>
        <van-field
          v-model="message"
          rows="2"
          autosize
          type="textarea"
          maxlength="500"
          placeholder="请输入建议"
          show-word-limit
        />
      </div>
      <van-button class="fix-bottom" @click="setOrder" block type="info" round
        >提交</van-button
      >
    </div>
  </div>
</template>

<script>
import navbar from "@/components/navbar";
import { Toast, Dialog } from "vant";
import { mapGetters } from "vuex";
import { setOrderReport } from "@/api/doctor";
export default {
  name: "doctorAdvice",
  data() {
    return {
      message: "",
      items: null,
      hospitalItems: null,
      deal1: "",
      deal2: "",
    };
  },

  components: { navbar },

  computed: {
    ...mapGetters(["userData", "doctorItem", "hospitalItem"]),
  },

  created() {
    this.items = this.$route.params.items || null;
    if (this.doctorItem) {
      this.items = this.doctorItem;
    }
    if (this.hospitalItem) {
      let arr = [];
      let arr1 = [];
      this.hospitalItems = this.hospitalItem;
      this.hospitalItems.forEach((item) => {
        arr.push(item.department);
        arr1.push(item.hospital);
        this.deal1 = arr.join(",");
        this.deal2 = arr1.join(",");
      });
    }
  },
  mounted() {},

  methods: {
    // 返回上一页
    goBack() {
      this.$router.replace({
        name: "checkList",
      });
      this.$store.commit("list/SET_DOCTOR_ITEM_STATUS", null);

      this.$store.commit("list/SET_HOSPITAL", null);
    },
    // 选择医院
    toHospital() {
      this.$router.push({
        name: "hospital",
      });
      this.$store.commit("list/SET_DOCTOR_ITEM_STATUS", this.items);
    },
    // 提交
    setOrder() {
      // doctorReason
      // orderId
      // adviseDepartment
      // adviseHospitial
      let { message, deal1, deal2, items } = this;
      if (message.length == 0) {
        Toast.fail("请输入建议");
      } else {
        let data = {
          doctorReason: message,
          orderId: items.orderId,
          adviseDepartment: deal1,
          adviseHospital: deal2,
          status: 4,
          dsId: items.dsId,
        };
        setOrderReport(data).then((res) => {
          if (res.data.status == 200) {
            Toast.success("提交成功");
            setTimeout(() => {
              this.goBack();
            }, 800);
          } else {
            Toast.fail(res.data.msg);
          }
        });
      }
    },
  },
};
</script>
<style lang='scss' scoped>
@import "../../assets/css/utils";
.container {
  position: relative;
  height: 100%;
  background: #f5f5f5;
  & .d-list {
    width: 95%;
    height: 100%;
    margin: auto;
    padding-bottom: 0.1rem;
    & .list-box {
      border-radius: 0.1rem;
      background: #fff;
      margin-top: 0.1rem;
      margin-bottom: 0.1rem;
      box-shadow: 4px 4px 10px #cccccc;
      & .head {
        display: flex;
        justify-content: space-around;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
        & img {
          width: 0.6rem;
          height: 0.6rem;
          border-radius: 50%;
        }
        & .right {
          width: 70%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          & .up {
            display: flex;
            justify-content: space-between;
            vertical-align: auto;
            & span:nth-of-type(1) {
              font-size: 0.2rem;
            }
            & span:nth-of-type(2) {
              font-size: 0.14rem;
            }
            & span:nth-of-type(3) {
              font-size: 0.14rem;
            }
          }
          & .down {
            display: flex;
            justify-content: space-between;
            & span:nth-of-type(1) {
              font-size: 0.14rem;
            }
            & span:nth-of-type(2) {
              font-size: 0.14rem;
            }
          }
        }
      }
    }
    & .advice {
      margin-top: 0.25rem;
      & p {
        text-align: left;
      }
      & .van-field {
        margin-top: 0.1rem;
      }
      & .van-cell {
        margin: 0.2rem 0;
      }
    }
  }
}
.van-cell__title {
  text-align: left;
}
.fix-bottom {
  position: fixed;
  bottom: 0.2rem;
  width: 95%;
  left: 50%;
  transform: translateX(-50%);
}
.hospital {
  font-size: 0.14rem;
  width: 90%;
  line-height: 0.18rem;
  margin: auto;
  margin-bottom: 0.2rem;
  color: #ff4e4e;
}
</style>